<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.test{
				width: 500px;
				height: 500px;
				margin: 50px auto;
				
			}
			img{
				vertical-align: middle; 	
			}
			p{
				vertical-align: middle;
			}
			i{
				width: 100px;
			}
			.ab1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			.ab2{
				width: 100px;
				height: 100px;
				display: none;
				background-color: blue;
			}
			.ab1:hover::after .ab2{
				display: block;
			}
		</style>
	</head>
	<body>
		
		<div class="test">
			<img src="../../1/img/bjk.jpg"/>
				<span>sdsdsdsdsd</span>
				<i>sdsdsd</i>
				<i>asdsadsad</i>
				<div class="ab1">
					<div class="ab2">
						lalalalallalalalalalla
					</div>
				</div>
				
		</div>
	</body>
</html>
